---
import ContainedSection from "../components/ContainedSection.astro"
import AnimationLayout from "#/layouts/AnimationLayout.astro"
import { contentfulClient } from "#/lib/contentful/client.ts"
import type { CategoryFields, EcosystemFields, EcosystemSkeleton } from "#/lib/contentful/types.ts"

let ecosystemData: Array<EcosystemFields> | null = null
let ecosystemCategories: Array<CategoryFields> | null = null
let error: string | null = null

try {
  const ecosystemEntries = await contentfulClient.getEntries<EcosystemSkeleton>({
    content_type: "ecosystem"
  })

  if (ecosystemEntries.items.length > 0) {
    ecosystemData = ecosystemEntries.items
      .map(item => item.fields)
      .sort((a, b) => a.name?.localeCompare(b.name))

    const allCategories = ecosystemData.flatMap(item => {
      if (Array.isArray(item.category)) {
        return item.category.map(cat => {
          return cat.fields.category
        })
      }
      return []
    })

    ecosystemCategories = Array.from(new Set(allCategories)).sort()
  } else {
    error = "No ecosystem data found."
  }
} catch (err) {
  console.error("Error fetching Contentful data:", err)
  error = "Failed to load content. Please try again later."
}
---

<AnimationLayout title="Ecosystem" text="Fix finance. Fix the world.">
  <ContainedSection className="flex gap-4 items-start  sm:mt-3">
    <!--
      <H1>Union <span class="text-accent-500">Ecosystem</span></H1>
      <QuoteSubTitle
        >The Union reef is an ocean of possibilities. Check out who is already
        swimming with us to build the modular zk future.
      </QuoteSubTitle>
       -->
    <!-- search input !-->

    <div class="flex-1 flex flex-col gap-4">
      <button
        id="filterToggle"
        class="pointer-events-auto bg-black flex items-center gap-2 justify-center text-white border px-6 py-2 w-fit font-semibold font-mono uppercase text-md md:text-lg"
      >
        Filter
        <svg
          class="w-5 h-5 min-w-5 min-h-5 transform transition-transform duration-200"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M19 9l-7 7-7-7"></path>
        </svg>
      </button>
    </div>
    <input
      type="text"
      id="searchInput"
      placeholder="Search..."
      class="pointer-events-auto min-w-0 bg-black flex items-center justify-center text-white border px-6 py-2 font-semibold font-mono text-md md:text-lg focus:ring-0 focus:ring-offset-0"
    />
  </ContainedSection>

  <ContainedSection className="mt-4">
    <div id="filterContent" class="hidden">
      {
        ecosystemCategories.map((category) => (
          <div class="mb-2">
            <label class="inline-flex items-center cursor-pointer font-mono uppercase">
              <input
                type="checkbox"
                name="category"
                value={category}
                class="sr-only peer"
              />
              <div
                class="w-5 h-5 flex items-center justify-center border-2 border-gray-400
                   peer-checked:bg-accent-500 peer-checked:border-accent-500
                   bg-transparent transition-colors duration-200 ease-in-out mr-2"
              >
                <svg
                  class="w-3 h-3 text-white hidden peer-checked:block"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M5 13l4 4L19 7"
                  />
                </svg>
              </div>
              {category}
            </label>
          </div>
        ))
      }
    </div>
  </ContainedSection>
  <!-- Cards Grid -->
  <ContainedSection
    grid
    className="place-content-evenly grid-cols-1 ssm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
  >
    {
      ecosystemData.map((item) => (
        <a
          href={item.url}
          target="_blank"
          class="place-self-center relative flex border-2 border-neutral-800 max-w-[240px] ssm:max-w-full rounded-tl-[4rem] overflow-hidden w-full aspect-[3/4] ecosystem-card hover:scale-105 transition"
        >
          <div class="absolute z-10 bottom-0 inset-x-0 h-full bg-gradient-to-t from-black to-black/0" />
          <img
            src={item.background.fields.file.url}
            alt={item.name}
            class="absolute inset-0 w-full h-full object-cover object-center"
          />
          <div class="p-3 z-10 flex flex-col justify-end w-full h-full">
            <div class="flex flex-row items-end">
              <div class="flex flex-col gap-2 w-full items-start ">
                <div class="flex flex-col gap-2 items-start justify-start">
                  {item.category.map((cat) => (
                    <div

                      class="text-xs whitespace-nowrap uppercase font-mono font-bold px-1.5"
                      id="card-cat"
                      style=`background-color: ${cat.fields.bgColor}; color: ${cat.fields.textColor}`
                    >
                      {cat.fields.category}
                    </div>
                  ))}
                </div>
                <h3 class="text-2xl uppercase font-supermolot font-bold">
                  {item.name}
                </h3>
              </div>
              <img
                src={item.logo.fields.file.url}
                alt={`${item.name} logo`}
                class="w-16 h-16 object-contain"
              />
            </div>
          </div>
        </a>
      ))
    }
  </ContainedSection>
</AnimationLayout>

<script>
  let globalClickHandler: ((event: MouseEvent) => void) | null = null;

  function initializeFilters() {
    // Clean up existing event listeners if they exist
    if (globalClickHandler) {
      document.removeEventListener("click", globalClickHandler);
      globalClickHandler = null;
    }

    // Get all required elements
    const searchInput = document.getElementById(
      "searchInput",
    ) as HTMLInputElement;
    const checkboxes = document.querySelectorAll(
      'input[type="checkbox"]',
    ) as NodeListOf<HTMLInputElement>;
    const cards = document.querySelectorAll(
      ".ecosystem-card",
    ) as NodeListOf<HTMLDivElement>;
    const filterToggle = document.getElementById("filterToggle");
    const filterContent = document.getElementById("filterContent");

    // Guard clause - if required elements aren't found, exit early
    if (!searchInput || !filterToggle || !filterContent) {
      console.warn("Required elements not found. Check HTML IDs.");
      return;
    }

    const filterIcon = filterToggle.querySelector("svg");

    // Remove existing event listeners from elements
    const oldInput = searchInput.cloneNode(true) as HTMLInputElement;
    searchInput.parentNode?.replaceChild(oldInput, searchInput);

    checkboxes.forEach((checkbox) => {
      const oldCheckbox = checkbox.cloneNode(true) as HTMLInputElement;
      checkbox.parentNode?.replaceChild(oldCheckbox, checkbox);
    });

    const oldFilterToggle = filterToggle.cloneNode(true);
    filterToggle.parentNode?.replaceChild(oldFilterToggle, filterToggle);

    // Get fresh references after replacement
    const newSearchInput = document.getElementById(
      "searchInput",
    ) as HTMLInputElement;
    const newCheckboxes = document.querySelectorAll(
      'input[type="checkbox"]',
    ) as NodeListOf<HTMLInputElement>;
    const newFilterToggle = document.getElementById("filterToggle");
    const newFilterIcon = newFilterToggle?.querySelector("svg");

    function filterCards(): void {
      const searchTerm = newSearchInput.value.toLowerCase();
      const selectedCategories = Array.from(newCheckboxes)
        .filter((cb) => cb.checked)
        .map((cb) => cb.value.toLowerCase().trim());

      cards.forEach((card) => {
        const nameElement = card.querySelector("h3");
        const name = nameElement?.textContent?.toLowerCase() || "";
        const categoryElements = card.querySelectorAll("#card-cat");
        const categories = Array.from(categoryElements).map(
          (el) => el.textContent?.toLowerCase().trim() || "",
        );

        const matchesSearch = name.includes(searchTerm);
        const matchesCategory =
          selectedCategories.length === 0 ||
          categories.some((cardCat) => selectedCategories.includes(cardCat));

        if (matchesSearch && matchesCategory) {
          card.classList.remove("hidden");
        } else {
          card.classList.add("hidden");
        }
      });
    }

    // Add new event listeners
    newSearchInput.addEventListener("input", filterCards);
    newCheckboxes.forEach((checkbox) =>
      checkbox.addEventListener("change", filterCards),
    );

    newFilterToggle?.addEventListener("click", () => {
      filterContent.classList.toggle("hidden");
      newFilterIcon?.classList.toggle("rotate-180");
    });

    // Create and store new global click handler
    globalClickHandler = (event: MouseEvent) => {
      const target = event.target as Node;
      const isClickInsideFilter =
        newFilterToggle?.contains(target) || filterContent.contains(target);

      if (!isClickInsideFilter && window.innerWidth < 768) {
        filterContent.classList.add("hidden");
        newFilterIcon?.classList.remove("rotate-180");
      }
    };

    document.addEventListener("click", globalClickHandler);
  }

  document.addEventListener("astro:page-load", initializeFilters);
  // Re-initialize on client-side navigation
  document.addEventListener("astro:after-swap", initializeFilters);
  // Initial call to set up filters
  initializeFilters();
</script>
